<template>
	<view class="pages" :class="themeName">
		<!-- #ifndef  H5 -->
		<custom-navbar :is-back="true" title="忘记密码" navigation-style="default"></custom-navbar>
		<!-- #endif -->

		<view class="forget-pwd">
			<view class="forget-pwd-text" style="font-size: 42rpx;color: #000000;font-weight: bold;">找回密码</view>
			<view style="margin-top: 15rpx;font-size: 26rpx;color: #666666;font-weight: bold;">请按以下操作重置密码信息</view>
			<view class="input m-t-40">
				<u-field 
					label-width="0" 
					v-model="ferget.mobile" 
					placeholder="输入手机号" 
					:border-bottom="false"
					:style="{ width: '100%' }" 
					type="number" 
				>
					<template v-slot:icon>
					    <image class="field-left-icon" src="/static/img/Home/sj3.png"></image>
					</template>
				</u-field>
			</view>
			<view class="input m-t-40">
				<u-field 
					label-width="0" 
					v-model="ferget.code" 
					placeholder="输入验证码" 
					:border-bottom="false" 
					type="number"
				>
					<template v-slot:icon>
					    <image class="field-left-icon" src="/static/img/Home/yzm3.png"></image>
					</template>
					<view slot="right">
						<view class="sms-btn p-l-20" @tap="sendSMS">
							<!-- 获取验证码 -->
							<u-verification-code unique-key="login" ref="uCode" @change="codeChange"></u-verification-code>
							<view 
								class="xs" 
								:class="{
									disabled: codeTips == '获取验证码' && ferget.mobile.length !== 11,
								}"
							>
								{{ codeTips }}
							</view>
						</view>
					</view>
				</u-field>
			</view>
			<view class="input m-t-40">
				<u-field label-width="0" v-model="ferget.password" :password="!pwdShow" type="text"
					:password-icon="false" placeholder="设置登录密码，6-20位数字、字母或字符" :border-bottom="false" :style="{ width: '100%' }">
					<template v-slot:icon>
					    <image class="field-left-icon" src="/static/img/Home/mm2.png"></image>
					</template>
					<view slot="right">
						<u-icon name="eye" @click="pwdShow = !pwdShow" v-show="!pwdShow" size="36rpx">
						</u-icon>
						<u-icon name="eye-off" @click="pwdShow = !pwdShow" v-show="pwdShow" size="36rpx"></u-icon>
					</view>
				</u-field>
			</view>
			
			<view class="input m-t-40">
				<u-field label-width="0" v-model="ferget.password_confirm" :password="!pwdShow" type="text"
					:password-icon="false" placeholder="确认登录密码" :border-bottom="false" :style="{ width: '100%' }">
					<template v-slot:icon>
					    <image class="field-left-icon" src="/static/img/Home/mm2.png"></image>
					</template>
					<view slot="right">
						<u-icon name="eye" @click="comfirmPwdShow = !comfirmPwdShow" v-show="!comfirmPwdShow" size="36rpx">
						</u-icon>
						<u-icon name="eye-off" @click="comfirmPwdShow = !comfirmPwdShow" v-show="comfirmPwdShow" size="36rpx"></u-icon>
					</view>
				</u-field>
			</view>
			
			<button class="forget-pwd-btn m-t-40 white" :class="{ disabled: isDisabled }" @tap="fergetFun">
				立即重置密码
			</button>
		</view>
	</view>
</template>

<script>
	import {
		apiResetPasswordCaptcha,
		apiResetPassword,
		apiCheckMobile,
	} from "@/api/app";
	import {
		mapGetters
	} from "vuex";

	export default {
		data() {
			return {
				ferget: {
					mobile: "",
					code: "",
					password: "",
					password_confirm: ''
				},
				codeTips: "",
				pwdShow: false,
				comfirmPwdShow: false,
			};
		},
		methods: {
			codeChange(tip) {
				this.codeTips = tip;
			},
			fergetFun() {
				let {
					mobile,
					password,
					code,
					password_confirm
				} = this.ferget;
				if (!mobile) {
					this.$toast({
						title: "请输入手机号",
					});
					return;
				}
				if (!code) {
					this.$toast({
						title: "请输入验证码",
					});
					return;
				}
				if (!password) {
					this.$toast({
						title: "请输入密码",
					});
					return;
				}
				if (password != password_confirm) {
				    this.$toast({
				        title: "两次密码输入不一致",
				    });
				    return;
				}
				// if (!password) {
				//   this.$toast({
				//     title: "请再次输入密码",
				//   });
				//   return;
				// }
				apiResetPassword({
					mobile,
					password,
					code,
				}).then((res) => {
					setTimeout(() => {
						this.$Router.back(1);
					}, 1500);
				});
			},
			async sendSMS() {
				if (!this.$refs.uCode.canGetCode) return;
				if (!this.ferget.mobile) {
					this.$toast({
						title: "请输入手机号",
					});
					return;
				}
				/**
				 * @descriptionp 检测手机号是否已经注册
				 */
				const {
					has
				} = await apiCheckMobile({
					mobile: this.ferget.mobile
				});
				if (has === 0) {
					return this.$toast({
						title: "手机号未注册",
					});
				}
				apiResetPasswordCaptcha({
						mobile: this.ferget.mobile,
					})
					.then((res) => {
						this.$refs.uCode.start();
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
		computed: {
			...mapGetters(["appConfig"]),
			isDisabled() {
				if (
					this.ferget.mobile.length == 11 &&
					this.ferget.code &&
					this.ferget.password
				) {
					return false;
				} else {
					return true;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100vh;
	}

	.pages {
		height: 100%;
		background-color: white;
		// background-image: linear-gradient(to bottom, #ff8200 0%, #F7F7F7 60%);
	}
	

	.forget-pwd {
		
		padding: 60rpx;
		padding-top: 280rpx;
		&-text {
			font-size: 38rpx;
		}

		.input {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1px solid #cccccc;
			// border-radius: 12rpx;
			overflow: hidden;
			
		}

		&-btn {
			margin-top: 40rpx;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 29rpx;
			font-weight: bold;
			border-radius: 12rpx;
			background: #ff8200;
			color:#fff;
		}

		.sms-btn {
			text-align: center;
			// @include font_color();
			font-size: 26rpx;
			font-weight: bold;
			color: #ff8200;
			border-left: $-solid-border;
		}

		.disabled {
			opacity: 0.5;
		}
	}
	.field-left-icon {
	    width: 22rpx;
	    height: 30rpx;
	}
</style>